@import url("reset.css");

@pol_yellow: rgb(228,168,000);
@pol_green: rgb(000, 151, 112);
@pol_hover_color: #fcf7b2;

.boxshadow(@x: 0.25em, @y: 0.25em, @d:0.3em, @color: #DFDFDF){
    -moz-box-shadow: @x @y @d @color;
    -webkit-box-shadow: @x @y @d @color;
    box-shadow: @x @y @d @color;
}

.borderradius(@radius: 0.5em){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.transition(@duration: 0.2s, @property: all, @function: ease){
    -webkit-transition: @property @duration @function;
    -o-transition: @property @duration @function;
    -moz-transition: @property @duration @function;
    transition: @property @duration @function;
}

.transform(@factor: 1.5){
    -moz-transform: scale(@factor);
    -webkit-transform: scale(@factor);
    -o-transform: scale(@factor);
    transform: scale(@factor);
}

.rgba_yellow(@alpha: 0.5){
    background: rgba(228,168,000, @alpha);
}

body{
    font-size: 1em;
    font-family: Verdana, sans-serif;
    color: #000;
    background: #dadada;
}

a:hover, a:focus, a:active{
    background: #2806f5;
    color: #fff;
}

#overall{
    width: 100%;
    min-width: 950px;
    background: #fff;
    overflow: auto;
}

#overall.overall-no-map{
    -webkit-border-bottom-right-radius: 90px;
    -moz-border-radius-bottomright: 90px;
    border-bottom-right-radius: 90px;
    margin-bottom: 2.5em;
}

#header{
    font-family: helvetica,arial,sans-serif;
    min-height: 120px;
    height: 7.5em;
    background: #fff;
    color: #000;
    border-top: 0.2em solid @pol_green;
    border-bottom: 1px solid @pol_yellow;
    position: relative;
}

h1 {
    position: absolute; 
    right: 5px; 
    top: 10px;
    width: 272px; 
    height: 110px; 
    background: url(../images/header-jr.png) no-repeat;
}

h1 a{
    position: absolute;
    width: 272px; 
    height: 110px; 
}

h1 a:hover, h1 a:focus, h1 a:active{
    background: transparent;
}

#navigation{
    position: absolute;
    bottom: 0;
    left: 0;
}

#navigation li{
    float: left;
}

#navigation li a{
    font-weight: bold;
    color: #000;
    .rgba_yellow(0.15);
    text-decoration: none;
    padding: 0.75em 0.5em;
    display: block;
    -webkit-border-top-right-radius: 0.5em;
    -webkit-border-top-left-radius: 0.5em;
    -moz-border-radius-topright: 0.5em;
    -moz-border-radius-topleft: 0.5em;
    border-top-right-radius: 0.5em;
    border-top-left-radius: 0.5em;
    border-right: 1px solid @pol_yellow;
    border-top: 1px solid @pol_yellow;
}

#navigation li:first-child a{
   border-left: 1px solid @pol_yellow;
}

#navigation li a, input.refreshmap, .button a, {
    .transition;
}

#navigation li a:hover, #navigation li a:focus, #navigation li a:active{
    background-color: @pol_yellow;
}

.content{
    padding: 2em 1.5em;
}

h2, h3{
    font-weight: bold;
    margin: 1.5em 0 1em;
}

h2{
    font-size: 1.3em;
}

h3{
    font-size: 1.2em;
}

#mapcontainter{
    margin-left: 19em;
}

#optionsidebar{
    float: left;
    width: 18.5em;
    border-right: 1px solid @pol_yellow;
    overflow: hidden;
    margin-bottom: 0.5em;
}

#optionsidebar h2{
    padding: 0 0.5em;
}

#optionsidebar > p:first-of-type{
    padding: 1em 0.5em 0;
}

#searchform_container{
    display: none;
}

input, select{
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
    font-size: 0.9em;
    padding: 0.3em;
    margin: 0.5em;
}

input[type=text], input[type=number], input[type=range], select{
    color: #51463d;
    background: #eceaea;
    border: 0.25em solid #aeadad;
    .borderradius(0.25em);
}

input[type=text]:focus, input[type=number]:focus, input[type=range]:focus, select:focus{
    border: 0.25em solid @pol_green;
    background: #fff;
}

input[type=submit]{
    font-weight: bold;
}

fieldset{
    border: 0.125em solid @pol_green;
    margin: 2em 0;
    padding: 0.5em 2em;
}

.sidebar_list{
    padding: 0.5em 0.5em 0;
    font-size: 0.9em;
}

.sidebar_list > li{
    border-bottom: 0.125em solid @pol_green;
}

.sidebar_list > li:last-child, .sidebar_list > li li:last-child{
    margin-bottom: 0.5em;
}

.sidebar_list h3{
    margin: 0.25em 0;
}

h3.spindown-heading a{
    font-weight: normal;
    font-family: Georgia, serif;
    font-size: 1.1em;
    color: #025237;
    text-shadow : #bef8e4 0 0.125em 0.125em;
    display: block;
    text-decoration: none;
    .transition;
}

h3.spindown-heading a:hover, h3.spindown-heading a:focus, h3.spindown-heading a:active{
    background: #bef8e4;
    color: #000;
}

.sidebar_list input[type=text], .sidebar_list select, #image_quality{
    display: block;
    margin-bottom: 1em;
}

.sidebar_list input.procolor{
	display: inline;
	width: 6em;
}

fieldset p{
    margin: 0.5em 0.25em;
}

.sidebar_list a{
    vertical-align: middle !important;
}

input.refreshmap{
    color: #fff;
    background: #025237;
    border: 0.25em solid rgb(12, 155, 107);
    border: 0.25em solid rgba(12, 155, 107, 0.6);
    text-shadow : rgb(0,0,0) 0 2px 2px;
    font-size: 1.2em;
    padding: 0.5em;
}

input.refreshmap:hover{
    background: #bef8e4;
    color: #000;
    text-shadow: none;
    cursor: pointer;
}

#datatable{
    width: 100%;
    margin: 1em auto 2em;
    font-size: 0.85em;
    border: collapse;
    border: 0.2em solid @pol_green;
    .boxshadow;
}

#datatable, #datatable td, #datatable th{
    border: collapse;
    border: 0.125em solid @pol_green;
}

#datatable th{
    font-weight: bold;
    background-color: @pol_yellow;
    color: #000;
}

#datatable tr:hover td, #datatable a:hover
{
    background: #fcf7b2;
}

#datatable td, #datatable th{
    padding: 0.5em;
}

#datatable td{
    font-size: 0.9em;
}

#datatable tr:target
{
    border: 0.5em solid @pol_green;
    font-weight: bold;
}

#datatable a{
    color: #048056;
    font-weight: bold;
    display: block;
    margin: -0.5em;
    padding: 0.5em;
}

#datatable a:focus, #datatable a:active{
    color: #fff;
}

td.t_type{
    text-align: center;
}

#no_js_map{
    text-align: center;
}

#map{
    height: 500px;
    position: relative;
}

.error{
    border: 0.25em solid #ee1404;
    background: #fd928a;
    font-size: 1.05em;
    padding: 1em;
    margin-bottom: 1em;
}

.error li{
    text-indent: 0.5em;
}

#chart li{
    padding: 0.5em;
    border: 0.125em solid #fcf7b2;
    font-size: 0.75em;
}

span.region{
    display: inline-block;
    width: 10em;
    text-align: right;
}

span.value{
    border-left: 0px solid @pol_yellow;
    padding-left: 1em;
    display: inline-block;
    vertical-align: middle;
    .transition(0.3s, all, linear)
}

span.value:hover{
    border-color: @pol_green;
}

#chart li:nth-child(odd), .mapdata tr:nth-child(odd){
    background: #fcf7b2;
}

.mapdata{
    font-size: 0.75em;
}

p.button{
    margin: 2em 0;
}

table + p.button{
    margin-top: 0;
} 

.button a{
    font-weight: bold;
    border: 0.2em solid @pol_green;
    background-color: @pol_yellow;
    color: #000;
    text-decoration: none;
    padding: 0.5em;
    .borderradius(0.3em);
}

.button a:hover, .button a:focus, .button a:active, a.custom-select:hover, a.custom-select:focus, a.custom-select:active, .selectbox-menu a:hover, .selectbox-menu a:focus, .selectbox-menu a:active{
    background: @pol_hover_color;
}

.button a:hover, .button a:focus, .button a:active{
    .transform(1.05);
}

#layers li:hover{
    cursor: move;
}

/*tooltip*/
.tooltip-detail{
    position: absolute;
    width: 10em;
    padding: 0.5em;
    font-size: 0.85em;
    background: #fcf7b2;
    border: 0.25em solid @pol_green;
    background: rgba(252, 247, 178, 0.9);
    .borderradius;
}

#legend{
    position: absolute;
    left:0;
    bottom: 0;
    z-index: 9999;
    height: 100%;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

#legend, .ol_legend{
    position: absolute;
    left:0;
    bottom: 0;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-border-top-right-radius: 1em;
    -moz-border-radius-topright: 1em;
    border-top-right-radius: 1em;
}

a.headerlink {
    font-size: 0.8em;
    padding: 0 0.25em 0 0.25em;
    text-decoration: none;
    visibility: hidden;
}

h2:hover > a.headerlink,
h3:hover > a.headerlink,
h4:hover > a.headerlink {
    visibility: visible;
}

#available_maps{
    .transition(0.5s, all, ease-in-out);
    padding: 0.125em;
    max-height: 15em;
    overflow: auto;
}

.available_maps_update{
    background: #f9fc28;
}

.group dt{
    clear: left;
    float: left;
    min-width: 8em;
    text-align: right;
    margin: 0.25em 0.5em 0.25em 0;
}

.group dt:after{
    content: ":";
}

.group dd{
    float: left;
    margin: 0.25em 0 0.25em;
}

.selection{
    font-weight: bold;
    font-size: 0.8em;
}
/*analysis-window*/
#analysis-window-overlay23{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #09f;
}

.analysis-window-js-overlay{
    overflow: hidden;
}

#analysis-window-container{
    position: fixed;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.95);
    border: 0.5em solid @pol_green;
    border-style: solid;
    .borderradius(1em);
    .boxshadow(1em, 1em, 1.8em, #a6a6a6);
    overflow: scroll;
}

#analysis-window{
    padding: 1em;
}

#analysis-window-close{
    position: absolute;
    top: 0;
    right: 1em;
}
/*boxplot*/
#boxplot{
    height: 500px;
    float: left;
    width: 250px;
}

div#boxplot + table, div#scatterplot + table
{
    width: auto; 
    float: left;
}

#scatterplot{
    height: 600px;
    float: left;
    width: 450px;
}

.w_value, .w_n_value{
    display: none;
}

/*openlayers controls*/
div.olControlScaleLine{
    bottom: 0;
    left: 250px;
}

/**/
.loading-image, #map.loading-image{
    cursor:wait;
}
/*selectbox*/
.selectbox-menu{
    position: absolute;
    border: 0.125em solid @pol_green;
    .borderradius(0.25em);
    width: 10em;  
    max-height: 15em;  
    overflow-x: hidden;
    overflow-y: auto;
    background-color: @pol_yellow;
    font-family: "Segoe UI",Frutiger,Tahoma,Helvetica,"Helvetica Neue",Arial,sans-serif;
}

.selectbox-menu a{
    display: block;
    padding: 0.5em 0.5em;
    background-color: @pol_yellow;
}

.custom-select-text{
    float: left;
    padding: 0.25em 0.5em;
}

.custom-select-button-icon{
    padding: 0.25em 0;
    float: right;
    height: 1.2em;
    width: 25px;
    background: @pol_green url(../images/arrow.png) no-repeat center center;
}

a.custom-select{
    line-height: 1.2;
    border: 0.125em solid @pol_green;
    display: inline-block;
    width: 10em;
    vertical-align: middle;
    .borderradius(0.25em);
    .transition(0.3s, all, ease-in-out);
    font-family: "Segoe UI",Frutiger,Tahoma,Helvetica,"Helvetica Neue",Arial,sans-serif;
}

a.custom-select, .selectbox-menu a{
    background-color: @pol_yellow;
    text-decoration: none;
    color: #000;
}

.selectbox-menu li[aria-selected="true"] a{
    background: @pol_green;
    color: #fff;
}

div.olControlOverviewMapElement  div.olMap{
    background:  #ccc;
}
/*###########################*/
/*skip classes*/
.skip, a.skip:visited{
    color: #fff;
    background: #081c3a;
}
.skip{
    position: absolute;
    left: -9999px;
    font-weight: bold;
}
.skip:focus, .skip:active{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    font-size: 1.3em;
    z-index: 5;
}

/* self-clear floats */

.group:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
